<template>
  <view class="mycomment">
    <view v-if="collectListData.length > 0">
      <view class="comment_list flex column" v-for="(item, index) in collectListData" :key="index">
        <view class="comment_center">
          {{ item.title }}
        </view>
        <view class="comment_top flex items justify-between">
          <view class="image_tittle flex items">
            <image :src="item.avatar" alt="" />
            <span>{{ item.nickname }}&nbsp;&nbsp;发布</span>
          </view>
          <view>
            <up-button
              class="editBtn"
              type="primary"
              :plain="true"
              text="取消点赞"
              @click="myCancelgoods(item.id)"
            ></up-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 暂无内容 -->
    <view style="background-color: #f5f5f5" class="nocontent" v-else></view>
  </view>
</template>
    <script setup>
import { userApi } from "../../api";
onLoad(() => {
  getMygood();
});
const mygood = ref({
  num: 10,
  page: 1
});
//总条数
const total = ref(0);
const status = ref(true);

const collectListData = ref([]);
const getMygood = () => {
  userApi
    .mygood(mygood.value)
    .then((res) => {
      if (res.code == 1) {
        total.value = res.data.total;
        // collectListData.value = [...collectListData.value, ...res.data.data];
        collectListData.value = mygood.value.page === 1 ? res.data.data : collectListData.value.concat(res.data.data);

        uni.hideLoading();
      }
    })
    .catch((err) => {
      uni.hideLoading();
    });
};

//取消点赞
const myCancelgoods = (id) => {
  if (!status.value) return;
  status.value = false;
  let cancelgoodsType = {
    type: 1, //1是论坛 2是评论
    id: id
  };
  userApi
    .cancelgoods(cancelgoodsType)
    .then((res) => {
      status.value = true;
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      } else {
        uni.showToast({ title: res.msg, icon: "none" });
        collectListData.value = [];
        mygood.value.page = 1;
        getMygood();
      }
    })
    .catch((err) => {
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

// 触底触发
onReachBottom(() => {
  if (total.value > mygood.value.num * mygood.value.page) {
    mygood.value.page++;
    getMygood();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return;
  }
});
</script>
    
    <style lang="scss" scoped>
page {
  background: #f5f5f5;
}
.mycomment {
  width: 100%;
  // height: 100%;
  box-sizing: border-box;
  background-color: #f5f5f5;
  padding: 24rpx 32rpx;
  .comment_list {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    padding: 24rpx;
    // border: 1px solid red;
    margin-bottom: 32rpx;

    .comment_top {
      display: flex;
      align-items: center;
      height: 72rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
      margin-top: 32rpx;
      image {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        opacity: 1;
      }
      span {
        height: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        line-height: 44rpx;
        margin-left: 16rpx;
      }
      .editBtn {
        // width: 104rpx;
        height: 56rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 2rpx solid #306eff;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #306eff;
      }
    }
    .comment_center {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 52rpx;
    }
    .comment_bottom {
      margin-top: 32rpx;
      border: 2rpx solid #e6e6e6;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 24rpx;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      .answer {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 52rpx;
      }
      image {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        opacity: 1;
      }
      span {
        height: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        line-height: 44rpx;
        margin-left: 16rpx;
      }
    }
  }
}
</style>